<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电子时钟</title>
</head>
<body>
    <p id="output"></p>
</body>
<script>
    //电子时钟

    //小于10的数字，补零
    function dbNum(num) {
        if(num < 10) {
            return '0' + num;
        }else{
            return '' + num;
        }
    }

    // console.log(dbNum(15));
    var output = document.getElementById('output');

    function showTime() {

        //1.获取系统时间
        var time = new Date();//获取系统时间对象
        var year = time.getFullYear();//年
        var month = time.getMonth();//从0开始，月。 5月==4
        var day = time.getDate();//日
        var hours = time.getHours();//时
        var mins = time.getMinutes();//分
        var secs = time.getSeconds();//秒
    

        //2.处理时间：显示成 2021年05月20日 08:55:01
        // var str =  year + '年' + (month + 1) +'月' + day +'日 ' + hours + ':' + mins + ':' + secs + '';
        // var str =  year + '年' + dbNum(month + 1) +'月' + dbNum(day) +'日 ' + dbNum(hours) + ':' + dbNum(mins) + ':' + dbNum(secs) + '';
        //es6==ECMAScript 2015=es6 字符串模板
        var str = `${year}年${dbNum(month + 1)}月${dbNum(day)}日 ${dbNum(hours)}:${dbNum(mins)}:${dbNum(secs)}`;
        // console.log(str);
        // document.write('现在的时间是：' + str);
        output.innerHTML = '现在的时间是：' + str;
    }

    showTime();//防止页面空白

    setInterval(showTime, 1000);//电子时钟的关键：不断获取系统时间显示

</script>
</html>